<template>
    <div>
        <!-- 轮播图的结构 -->
        <Carousel></Carousel>
        <!-- 首页搜索医院表单的区域 -->
        <Search></Search>
        <!-- 底部展示医院的结构 -->
        <el-row gutter="20">
            <el-col :span="20">
                <Level @getlevel="getLevel" @getRegion="getRegion"></Level>
                <div class="hospital" v-if="hasHospitalArr.length > 0">
                    <Choose v-for="item in hasHospitalArr" :key="item.id" :hospitalInfo="item"></Choose>
                </div>
                <el-empty v-else description="没有可选的医院" />
            </el-col>
            <el-col :span="4">
                <Tip></Tip>
            </el-col>
        </el-row>
        <!-- 下面的分页器 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20]"
                :background="true" layout="prev, pager, next, jumper,total" :total="13" @current-change="currentChange" />
        </div>
      
    </div>
</template>

<script setup lang="ts">
import Carousel from './carousel/index.vue';
import Search from './search/index.vue';
import Level from './level/index.vue';
import Choose from './choose/index.vue';
import Tip from './tip/index.vue';
import { onMounted, ref } from 'vue';
import { reqHospital } from '@/api/home/index';
import type { HospitalResponseData, Content } from '@/api/home/type';
// 分页器页码
let pageNo = ref<number>(1)
// 一页展示几条数据
let pageSize = ref<number>(10)
// 已有的医院数据
let hasHospitalArr = ref<Content>([])
// 获取医院的个数
let total = ref<number>()
// 存储医院等级相应数据
let hostype = ref<string>('')
// 存储医院地区相应数据
let districtCode = ref<string>('')
onMounted(() => {
    // getHospitalInfo();
    getHospitalInfo()

});
// 获取已有医院的数据
const getHospitalInfo = async () => {
    // 获取医院的数据：默认获取第一页、一页十个医院的数据
    let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
    
    if (result.code == 200) {
        hasHospitalArr.value = result.data.content
        total.value = result.data.totalElements
    }

};

// 分页器页码发生变化
const currentChange = () => {
    getHospitalInfo()

}

// 子组件自定义事件：获取儿子给父组件传递过来的等级参数
const getLevel = (Level:string) =>{
    // 获取参数：等级参数
    hostype.value = Level
    // 再次发请求
    getHospitalInfo()
    
}

const getRegion = (region:string) =>{
    // 获取参数：位置参数
    districtCode.value = region
    // 再次发请求
    getHospitalInfo()
    
}

</script>

<style scoped lang="scss">
.hospital{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>